import React, { PureComponent } from 'react'
import { Modal, Form, Input } from 'antd'
// import PropTypes from 'prop-types'

import Style from './addModal.css'

const { TextArea } = Input
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 16 }
}
class EditModalForm extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.handleCancel = this.handleCancel.bind(this)
    this.handleOk = this.handleOk.bind(this)
  }

  handleCancel () {
    this.props.handleEditCancel()
  }
  handleOk () {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.handleEditOk(values)
      }
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form
    const { showEditModal, data = {}, confirmLoading } = this.props

    return (
      <div className={Style['edit-modal']}>
        <Modal
          title='编辑部门'
          visible={showEditModal}
          width={600}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          destroyOnClose
          onCancel={this.handleCancel}
        >
          <Form {...formItemLayout}>
            <Form.Item label='部门名称'>
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入部门名称' }],
                initialValue: data.deptName || ''
              })(
                <Input placeholder='请输入' />
              )}
            </Form.Item>
            <Form.Item label='职能描述'>
              {getFieldDecorator('remark', {
                initialValue: data.remark
              })(
                <TextArea placeholder='请输入' />
              )}
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}

EditModalForm.propTypes = {
}

const EditModal = Form.create()(EditModalForm)
export default EditModal
